<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <areas :areas="treeAreas" :area-type="areaType"  v-on:handleNodeClick="onHandleNodeClick" />
      </el-col>
      <el-col :span="20" :xs="24">
        <el-card>
          <div class="filter-container">
<!--            <el-input clearable style="margin-left: 20px;width: 140px" class="filter-item" v-model="listQuery.device_number" placeholder="终端编号"></el-input>-->
<!--            <el-select style="margin-left: 20px;width: 110px" class="filter-item" clearable v-model="listQuery.unit" placeholder="单元号">-->
<!--              <el-option-->
<!--                v-for="item in units"-->
<!--                :key="item"-->
<!--                :label="item"-->
<!--                :value="item">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--            <el-input style="margin-left: 10px;width: 120px" class="filter-item" type="number" clearable v-model="listQuery.floor" placeholder="楼层"></el-input>-->
<!--            <el-input style="margin-left: 10px;width: 120px" class="filter-item" type="number" clearable v-model="listQuery.room_number" placeholder="门牌号"></el-input>-->
            <el-input style="margin-left: 20px;width: 120px" class="filter-item" type="number" clearable v-model="listQuery.max" placeholder="水量阈值"></el-input>
            <el-date-picker class="filter-item" style="margin-left:20px" clearable
                            v-model="listQuery.date_range"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
            </el-date-picker>
            <el-button v-if="checkPermission('查询记录')" style="margin-left:40px" class="filter-item" type="primary" icon="el-icon-search" @click="getWaterList">
              查询
            </el-button>
          </div>
          <div class="app-container">
            <el-table
              :key="tableKey"
              v-loading="listLoading"
              :data="list"
              ref="waterTable"
              :row-style="{height:40+'px'}"
              :cell-style="{padding:0+'px'}"
              border
              fit
              stripe
              highlight-current-row
              height="700"
              style="width: 100%;"
            >
              <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column label="终端编号" align="center" >
                <template slot-scope="{row}">
                  <span>{{row.terminal_number }}</span>
                </template>
              </el-table-column>
              <el-table-column label="水司编号" align="center"  >
                <template slot-scope="{row}">
                  <span>{{row.refer_number || '-'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="所属用户" align="center" width="370">
                <template slot-scope="{row}">
                  <span>{{ row.area_name+'/'+row.address }}</span>
                </template>
              </el-table-column>
              <el-table-column  label="用水量(m³)"  align="center">
                <template slot-scope="{row}">
                  <span>{{row.volume.toFixed(2)}}</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getWaterList" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import areas from '@/components/area/AreaTree'
import Pagination from '@/components/Pagination'
import {waterAmount} from "@/api/meter";
import {getAreaTree} from "@/api/area";
import LineChart from "@/views/equip/components/LineChart";
import {checkPermission} from "@/utils/permission";

export default {
  name: 'water-amount',
  components:{areas,Pagination,LineChart},
  data() {
    return {
      tableKey:0,
      exportLoading:false,
      listLoading:true,
      list:[],
      total:0,
      areaType:2,
      listQuery:{
        area_code:'',
        floor:'',
        room_number:'',
        max:'',
        unit:'',
        device_code:'',
        date_range:[''],
        page:1,
        pageSize:20
      },
      units:['一单元','二单元','三单元','四单元','五单元','六单元','七单元','八单元','九单元','十单元'],
      treeAreas:[],
      exportData:{
        list:[],
        headers:[]
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  created() {
    this.getWaterList()
    this.getAreaTree()
  },
  methods: {
    checkPermission,
    getAreaTree(type){
      getAreaTree({type:2}).then(response => {
        this.treeAreas = response.data
      })
    },
    onHandleNodeClick:function (data) {
      if(this.listQuery.area_code != data.code){
        this.listQuery.area_code = data.code
        this.getWaterList()
      }
    },
    getWaterList(){
      this.listLoading = true
      let data = Object.assign({},this.listQuery)
      data.max = parseFloat(data.max == ''?0:data.max)
      waterAmount(data).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    resetQueryParams(){
      this.listQuery = {
        area_code:'',
        floor:'',
        room_number:'',
        unit:'',
        max:0,
        device_code:'',
        date_range:[''],
        page:1,
        pageSize:20
      }
    }
  }
}
</script>
